<template>
  <div class="customerType">
    <topBar :title="title"></topBar>
    <div class="main-wrap">
      <div class="left">
        <div class="text">
          <div class="margin">
            <div class="square"></div>
            <div class="html">{{ gongzStr }}</div>
          </div>
          <div>
            <span class="square"></span>
            <span class="html">{{ zengqStr }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
        <div>码号收入分渠道</div>
        <stackChart :chartsData="chartsData"></stackChart>
    </div>
    <div class="table">
        <el-table style="width: 100%" :data="tableData" border :cell-style="{padding: '0px'}"
        :header-cell-style="{background: '#C00000', color: '#ffffff',padding: '0',height:'26px'}">
        <el-table-column align="center" :label="headerData.custType" prop="custType"></el-table-column>
        <el-table-column align="center" :label="headerData.yearonyear" prop="yearonyear"></el-table-column>
        <el-table-column align="center" :label="headerData.chainComparison" prop="chainComparison">
            <template slot-scope="scope">
                <div >
                {{ scope.row.chainComparison + "%" }}
                </div>
            </template>
        </el-table-column>
        <el-table-column align="center" :label="headerData.hb" prop="hb"></el-table-column>
        <el-table-column align="center" :label="headerData.hbzf" prop="hbzf">
            <template slot-scope="scope">
                <div >
                {{ scope.row.hbzf + "%" }}
                </div>
            </template>
        </el-table-column>
        </el-table>
    </div>
    <p class="remark">注：政企公众以客户类型区分省公司码号收入口径，含四大主量</p>
  </div>
</template>

<script>
import topBar from "./topBar";
import stackChart from "../showEchart/stackChart";
import {
  mahaoCustomerType,
  mahaoCustomerTypetable,
} from "@/api/codeIncome/analysis";
export default {
  name: "customerType",
  components: {
    topBar,
    stackChart,
  },
  props: {
    searchData: {
      type: Object,
      default: {},
    },
  },
  watch: {
    searchData: {
      handler(newName) {
          this.getData();
          this.getTableData();
      },
      deep: true,
    },
  },
  data() {
    return {
      title: "码号收入 – 分客户类型",
      gongzStr: "",
      zengqStr: "",
      chartsData: {},
      tableData: [],
      headerData: {}
    };
  },
  created() {},
  mounted() {
    this.getData();
    this.getTableData();
  },
  methods: {
    // 获取码号收入整体趋势
    getData() {
      mahaoCustomerType({
        acctMonth: this.searchData.acctMonth,
        areaId: this.searchData.areaId,
      }).then((res) => {
        if (res.code == 200) {
          this.gongzStr = res.data.gongzStr;
          this.zengqStr = res.data.zengqStr;
          let obj = {};
          obj["time"] = res.data.acctMonths;
          let arr1 = [];
          let arr2 = [];
          let arr3 = [];
          let arr4 = [];
          res.data.bnZq.forEach((item) => {
            arr1.push(item.indexValue);
          });
          res.data.bngz.forEach((item) => {
            arr2.push(item.indexValue);
          });
          res.data.wnZq.forEach((item) => {
            arr3.push(item.indexValue);
          });
          res.data.wngz.forEach((item) => {
            arr4.push(item.indexValue);
          });
          obj["bnZq"] = arr1;
          obj["bngz"] = arr2;
          obj["wnZq"] = arr3;
          obj["wngz"] = arr4;
          this.chartsData = obj;
        }
      });
    },
    getTableData() {
      this.tableData = []
      mahaoCustomerTypetable({
        acctMonth: this.searchData.acctMonth,
        areaId: this.searchData.areaId,
      }).then((res) => {
        if (res.code == 200) {
          this.headerData = res.data[0]
          this.tableData = res.data.slice(1,3)
        }
      });
    },
  },
};
</script>

<style scoped>
.customerType {
    box-sizing: border-box;
    padding: 20px;
    box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 15%);
}
</style>

<style scoped lang="scss">
.customerType {
  margin-top: 20px;
  height: auto;
  .main-wrap {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px;
    .left {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      .text {
        width: 100%;
        > div {
          display: flex;
          justify-content: flex-start;
        }
        .margin {
            margin-bottom: 20px;
        }
        .square {
          margin-top: 15px;
          margin-right: 10px;
          width: 10px;
          height: 10px;
          background: #c00000;
          transform: rotate(45deg);
        }
        .html {
          flex: 1;
          font-size: 20px;
          color: black;
          letter-spacing: 1px;
          line-height: 38px;
        }
      }
    }
  }
  .right {
    width: 100%;
    height: 300px;
    div {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
        font-weight: bold;
    }
}
  .table {
    width: 100%;
    box-sizing: border-box;
    padding-left: 20px;
    margin-top: 10px;
  }
  .remark {
      font-size: 12px;
      color: rgba(133, 131, 131, 0.678);
      margin-top: 20px;
  }
}
</style>
